<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>个人中心</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/layui/css/layui.css?v=version_0.2">
    <link rel="stylesheet" href="/static/css/global.css?v=version_0.2">
    <link rel="stylesheet" href="/static/css/profile.css?v=version_0.2">
    <style>
        /* .layui-nav-item .layui-icon {
            font-size: 20px;
        }

        .menu-item {
            cursor: pointer;
        } */
    </style>
</head>

<body>

    <div id="header-bar"></div>

    <div class="layui-container fly-marginTop fly-user-main">
        <ul class="layui-nav layui-nav-tree layui-inline" id="menu" lay-filter="user">


        </ul>

        <div class="site-tree-mobile layui-hide">
            <i class="layui-icon">&#xe602;</i>
        </div>
        <div class="site-mobile-shade"></div>

        <div class="site-tree-mobile layui-hide">
            <i class="layui-icon">&#xe602;</i>
        </div>
        <div class="site-mobile-shade"></div>


        <div class="fly-panel fly-panel-user" pad20>
            <!-- 内容页 -->
            <div id="page-content">

            </div>
        </div>
    </div>
    </div>

    <div id="footer">
        
    </div>

    <script src="/static/layui/layui.js?v=version_0.2"></script>
    <script>
        layui.config({
            version: "version_0.2"
            , base: '/static/mods/'
        }).extend({
            fly: 'index'
        }).use(['layer', 'jquery', 'app', 'my_base', 'fly'], function () {
            var $ = layui.jquery
                , layer = layui.layer;
            function renderMenu() {
                var menus = [
                    // { url: "/admin/home", icon: "layui-icon-chart-screen", title: "统计页面" },
                    { url: "/blogs", icon: "layui-icon-list", title: "我的文章" },
                    { url: "/anthology", icon: "layui-icon-tabs", title: "专栏管理" },
                    { url: "/message", icon: "layui-icon-email", title: "审核消息" },
                    { url: "/setting", icon: "layui-icon-set-fill", title: "设置" },
                    
                ];
                for (let i = 0; i < menus.length; i++) {
                    const element = menus[i];
                    const html = '<li class="layui-nav-item"><a class="menu-item" data-href="' + element.url + '">' +
                        '<i class="layui-icon ' + element.icon + '"></i>' + element.title + '</a></li>'
                    $("#menu").append(html)
                }
                // 菜单点击
                $("#menu .menu-item").click(function () {
                    $("#menu .menu-item").parent().removeClass("layui-this")
                    $(this).parent().addClass("layui-this")
                    app.go($(this).data("href"))
                    // console.log($(this).data())
                })


            }
            renderMenu()

            app = layui.app;
            app.init({
                contentElemId: '#page-content',
                config: {
                    // viewUrlPrefix: "/calendar/",
                    templatePath: "/profile/template/",
                    // viewUrlSuffix:'.html'
                },

                success: function () {
                    console.log('==== Index Success ====');
                    app.runTpl("header", {elem: "#header-bar"})
                    app.runTpl("footer", {elem: "#footer"})
                    // 核心扩展方法
                    app.base = layui.my_base;
                    app.base.routeDefine([
                        {
                            path: '/setting',
                            url: "/profile/pages/index/setting.html"
                        },
                        {
                            path: '/blogs',
                            url: "/profile/pages/index/blogs.html"
                        },
                        {
                            path: '/anthology',
                            url: "/profile/pages/index/anthology.html"
                        },
                        {
                            path: '/message',
                            url: "/profile/pages/index/message.html"
                        },
                        {
                            path: '/about',
                            url: "/profile/pages/index/about.html"
                        },
                        
                    ])
                    var url = app.getRoute();
                    if (url) {
                        app.goToPage(url);
                    } else {
                        app.go("/blogs");
                    }
                }
            })

        })
    </script>

</body>

</html>